// out: ../css/index.css

// 导航
.bg-body-tertiary {
  // transparent: 背景色透明
  background-color: transparent !important;
  .navbar-collapse {
    // 控制弹性盒子的弹性伸缩比
    flex-grow: 0;
  }
}

// 轮播图
.carousel {
  // 响应式 -> 媒体查询
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
    }
  }
  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
    }
  }
  .carousel-item {
    // height: 500px;
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    background-image: url('../assets/uploads/banner_1.jpg');
  }
  .carousel-item:nth-child(2) {
    background-image: url('../assets/uploads/banner_2.jpg');
  }
  .carousel-item:nth-child(3) {
    background-image: url('../assets/uploads/banner_3.jpg');
  }
  .carousel-item:nth-child(4) {
    background-image: url('../assets/uploads/banner_4.jpg');
  }
}

// 开源项目
// 视口宽度大于992,一行排4个盒子
// 视口宽度大于768,一行排2个盒子
.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      // 栅格内容之间有间距,套子节点用父级的padding撑开
      a {
        // 块级的宽度和父级一样大
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }

      &:nth-child(1) a {
        background-color: #70c3ff;
      }
      &:nth-child(2) a {
        background-color: #fd6a7f;
      }
      &:nth-child(3) a {
        background-color: #7f8ea0;
      }
      &:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}